<template>
  <component :is="view.type" v-bind="view.attrs" v-debug="{ vms, models, dataSet }">
    <starScrollView v-if="dataSet.storeData">
      <div v-for="warehouse in dataSet.storeData.hier.content.filter((w) => w.parentId === 'root')" class="warehouse">
        <div class="warehouse-mark" @mouseenter="warehouseShow=warehouse.id" @mouseleave="warehouseShow=null">
          <star-float-toobar v-if="warehouseShow===warehouse.id" 
            @click="$event=='add'?handleCreate():$event=='edit'?handleEdit(warehouse):handleDelete(warehouse)">
          </star-float-toobar>
          <div class="warehouse-mark-icon bg-img-cover"></div>
          <div>{{ warehouse.values.sf_name }}</div>
        </div>
        <div class="warehouse-area">
          <template v-for="row in warehouse.values.line">
            <div class="warehouse-line">
              <template v-for="col in warehouse.values.column">
                <div class="warehouse-position" @mouseenter="positionShow=warehouse.id+'.'+row+'.'+col" @mouseleave="positionShow=null">
                  <star-float-toobar v-if="positionShow===warehouse.id+'.'+row+'.'+col"
                    :config="[{show:false},{},{show:false}]"
                     @click="handleStoreEdit(getItem(warehouse.nodeId,row,col))">
                  </star-float-toobar>
                  <div class="warehouse-position-mark">
                    <div class="warehouse-position-icon"></div>
                    {{ row }},{{ col }}
                  </div>
                  <div :class="{
                    'warehouse-position-content':true,
                    'warehouse-position-disabled':!getStatus(warehouse.nodeId,row,col)||getStatus(warehouse.nodeId,row,col)==='停用'}">
                    {{getItem(warehouse.nodeId,row,col)?getItem(warehouse.nodeId,row,col).values.sf_name:''}}
                  </div>
                    
                </div>
              </template>
          </div>
          </template>
          
        </div>
      </div>
    </starScrollView>
    <createModal :dataSet="dataSet"></createModal>
    <editModal :dataSet="dataSet"></editModal>
    <editLocationModal :dataSet="dataSet"></editLocationModal>
    <!-- <tankModal :dataSet="dataSet"></tankModal> -->
  </component>
</template>

<script>
import ancMixin from "./ancMixin";
export default {
  name: "",
  mixins: [ancMixin],
  data() {
    return {
      value1: "0",
      warehouseShow:null,
      positionShow:null
    };
  },
  props: {},
  watch: {},
  computed: {
    view() {
      return {
        type: ["starGenView", "starTwoView", "starThreeView"][0],
        attrs: {
          left: 12,
          right: 12,
          middle: 0,
          minLeftHeight: "600px",
          title: {
            "en-US": "abc",
            "zh-CN": "库位管理",
          }[this.G_Locale],
          fontStyle: {},
        },
      };
    },
  },
  created() {},
  mounted() {},
  methods: {
    show() {
      this;
    },
    getItem(nodeId,row,col){
      return this.dataSet.storeData.hier.content.find((w) => w.parentId === nodeId&&w.values.line===row&&w.values.column===col)
    },
    getStatus(nodeId,row,col){
      let item =this.getItem(nodeId,row,col);
      if(item&&item.values&&item.values.status){
        return item.values.status;
      }else{
        return null;
      }
    }
  },
};
</script>
<style scoped lang="scss">
.warehouse {
  display: flex;
  background-color: #fff;
  padding: 10px;
  border: #BBFFFF 1px solid;
  margin: 5px 0;
}
.warehouse-mark {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content:space-around;
  align-items: center;
  width: 200px;
  min-height: 150px;
  background-color: #F8F8FF;
}
.warehouse-mark-icon {
  width: 100px;
  height: 100px;
  background-size:cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("./pic/库区.png");
}
.warehouse-area {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content:space-between;
  padding: 0px 10px;
  background-color: #F8F8FF;
  opacity: 0.5;
  margin: 0 5px;
}
.warehouse-line {
  display: flex;
  justify-content:space-around;
  width: 100%;
  padding: 10px;
}
.warehouse-position {
  display: flex;
  position: relative;
  width: 250px;
  height: 75px;
  border: 1px solid #dcdee2;
  &:hover {
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
    border-color: #eee;
  }
}
.warehouse-position-mark {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  width: 75px;
  height: 75px;
  background-color: #ebebfa;
}
.warehouse-position-icon {
  width: 25px;
  height: 25px;
  background-size:cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("./pic/库位.png");
  text-align: center;
  vertical-align: middle;
}
.warehouse-position-content {
  display: flex;
  width: 175px;
  height: 75px;
}
.warehouse-position-disabled {
  background-repeat: repeat;
  background-image: url("./pic/格子.png");
}
</style>
